<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 按钮 -->
        <common-header :is-show="false" :is-show-btn="true" />
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
          点击单元格
        >
          <!-- @cell-click="clickRowHandle" -->
          <!--default-checked-keys 默认选中的数组 -->
          <el-table-column type="expand">
            <!-- 展开行 -->
            <template slot-scope="{row}">
              <el-row v-for="item in row.children " :key="item.id" class="expandRow">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-tag>{{ item.authName }}</el-tag>
                    <i class="el-icon-caret-right" />
                  </div>
                </el-col>
                <el-col :span="16">
                  <el-row v-for="item2 in item.children" :key="item2.id">
                    <el-col :span="8">
                      <div class="grid-content bg-purple-light">
                        <el-tag type="success">{{ item2.authName }}</el-tag>
                        <i class="el-icon-caret-right" />
                      </div>
                    </el-col>
                    <el-col :span="16">
                      <span v-for="item3 in item2.children" :key="item3.id">
                        <el-tag closable type="warning" @click="deleteTag(row.id,item3.id)">{{ item3.authName }}</el-tag>
                      </span>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            label="#"
            type="index"
          />
          <el-table-column
            label="角色名称"
            prop="roleName"
          />
          <el-table-column
            label="角色描述"
            prop="roleDesc"
          />
          <el-table-column
            label="操作"
            width="300"
          >
            <template slot-scope="{row}">
              <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-setting"
                @click="assignPermissions(row)"
              >分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 分配权限的弹出层 -->
    <el-dialog
      title="分配权限"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-tree
        ref="tree"
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        highlight-current
        :default-checked-keys="checked_arr"
        :props="defaultProps"
      />
      <!--  highlight-current : 高亮  default-expand-all ： 是否默认展开所有节点 -->
      <!-- show-checkbox ： 节点是否可被选择   node-key  ：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getCheckedKeys">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import CommonHeader from '@/components/CommonHeader'
import { roleList, roleAuthorization, deleteRolePermissions } from '@/api/roles'
import { allPermissionsList } from '@/api/table'
export default {
  name: 'Roles',
  components: {
    CommonHeader
  },
  data() {
    return {
      // 展示行的数据
      rowData: [],
      // 表格数据
      tableData: [],
      // 显示分配权限的弹出层
      dialogVisible: false,
      // 类型
      type: 'tree',
      // 树形内容
      data: [],
      defaultProps: {
        children: 'children',
        // 指定子树节点
        label: 'authName'
        // 展示树的名字
      },
      // 分配权限默认选中的数组
      checked_arr: [],
      roleId: '',
      rids: ''

    }
  },

  created() {
    this.loadRolesList()
  },

  methods: {
    // 获取角色列表
    async  loadRolesList() {
      const res = await roleList()
      this.tableData = res
    },
    // 分配权限
    async assignPermissions(row) {
      console.log(row)
      this.roleId = row.id
      this.dialogVisible = true
      const res = await allPermissionsList(this.type)
      this.data = res
      this.checked_arr = []
      this.getCheckedKey(row, this.checked_arr)
    },
    // 递归点亮默认选中
    getCheckedKey(row, arr) {
      if (!row.children) {
        return arr.push(row.id)
      }
      row.children.forEach(item => {
        this.getCheckedKey(item, arr)
      })
    },
    // 分配权限，点击确定，更新成功
    async getCheckedKeys() {
      try {
        // console.log(this.$refs.tree.getCheckedKeys())
        this.rids = this.$refs.tree.getCheckedKeys()
        this.rids = this.rids.join(',')
        await roleAuthorization(this.roleId, this.rids)
        this.$message.success('更新成功')
        this.dialogVisible = false
      } catch (err) {
        console.log(err)
      }
    },
    // 删除标签
    async deleteTag(roleid, rightsId) {
      // console.log(item3)
      try {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await deleteRolePermissions(roleid, rightsId)
        this.$message.success('删除权限成功')
      } catch (err) {
        console.log(err)
      }
    }
    // 当某一行被点击时会触发该事件
    // clickRowHandle(row, column, event) {
    //   console.log(row)
    // },
    // getCheckedKey(checkedArr) {
    //   console.log(checkedArr)
    //   // this.checked_arr = this.$refs.tree
    // }

  }
}
</script>

<style scoped lang='scss'>
.expandRow{
  i{
    margin-left: 5px;
  }
}
.el-tag.el-tag--success{
  margin: 7px;
}
.el-tag.el-tag--warning{
  margin: 7px;
}
</style>

